<template>
    <view class="page-wrap">
        <view class="activity-main">
            <image src="https://img2.baidu.com/it/u=2324087185,3406141067&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" mode="aspectFill" class="activity-img" />
            <view class="activity-title">活动名称活动名称</view>
            <view class="activity-subtitle">活动方式</view>
            <!-- 循环渲染规则部分 -->
            <view class="activity-rule">
                <view class="activity-order">1</view>
                关注XXX公众号，并且注册成为XXX的新会员/或已入会的老会员，按照要求上传照片，根据活动的投票结果，前三位用户可获得此次奖品。
            </view>
            <view class="activity-subtitle">活动时间</view>
            <view class="activity-time">活动时间：7月12日-8月4日 </view>
            <view class="find-but" @tap="toPage">查看活动投票</view>
        </view>
    </view>
</template>

<script setup>

const toPage = ()=>{
    uni.navigateTo({url:'/pages/voting-activity/list'})
}
</script>

<style lang="scss" scoped>
.page-wrap {
    padding: 15rpx;
    min-height: 100vh;
    background-color: #f5f5f5;
    .activity-main {
        background-color: #fff;
        border-radius: 20rpx;
        overflow: hidden;
        .activity-img {
            width: 100%;
            height: 500rpx;
        }
        .activity-title {
            padding: 15rpx 40rpx;
            box-sizing: border-box;
            margin: 0 auto 15rpx;
            width: calc(100% - 60rpx);
            text-align: center;
            font-size: 33rpx;
            font-weight: 600;
            border-bottom: 2px solid rgba($color: #000000, $alpha: 0.01);
        }
        .activity-subtitle {
            padding: 0 30rpx 10rpx;
            font-size: 28rpx;
        }
        .activity-rule {
            padding: 0 30rpx 15rpx;
            display: flex;
            align-items: baseline;
            font-size: 28rpx;
            .activity-order {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
                margin-right: 10rpx;
                width: 30rpx;
                height: 30rpx;
                border-radius: 50%;
                font-size: 24rpx;
                color: #fff;
                background: rgba(234, 85, 6, 1);
            }
        }
        .activity-time {
            padding: 0 70rpx 70rpx;
            font-size: 28rpx;
        }
        .find-but {
            margin: 0 auto 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: calc(100% - 60rpx);
            height: 90rpx;
            background: rgba(234, 85, 6, 1);
            color: #fff;
            font-size: 28rpx;
            border-radius: 10rpx;
        }
    }
}
</style>
